<template>
  <div>
    <el-form :model="step" ref="form" label-width="100px" :rules="rules">
      <el-form-item label="步骤名称" prop="name">
        <el-input v-model="step.name"></el-input>
      </el-form-item>

      <el-form-item label="数据源选择">
        <el-col :span="8">
          <el-form-item prop="connection">
            <el-select v-model="step.connection" placeholder="目标数据源">
              <el-option v-for="source in dataSource.sourceList" :label="source.name" :value="source.id">
                <span style="float: left">{{ source.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ source.type }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">--</el-col>
        <el-col :span="8">
          <el-form-item prop="table">
            <el-select v-model="step.table" placeholder="目标表..">
              <el-option v-for="table in dataSource.tables" :label="table.cnname" :value="table.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="提交记录数" style="margin-bottom: 0">
        <el-input-number v-model="step.commit" :min="0" :step="1000"></el-input-number>
      </el-form-item>
      <el-form-item label="插入前清空表">
        <el-checkbox v-model="step.truncate" true-label="Y" false-label="N"
                     style="padding-right: 50px"></el-checkbox>
        忽略插入错误
        <el-checkbox v-model="step.ignore_errors" true-label="Y" false-label="N"></el-checkbox>
      </el-form-item>
      <el-button type="primary" @click="fetchFieldsFromTable(transportFields)">获取字段</el-button>
      <el-button icon="plus" @click="addRecord"></el-button>
      <!--<help-info></help-info>-->
      <br><br>
      <el-table :data="step.fields" stripe :max-height="300">
        <el-table-column type="index" width="80"></el-table-column>
        <el-table-column label="表字段">
          <template scope="scope">
            <div v-if="!scope.row.edit">{{scope.row.column_name}}</div>
            <div v-else>
              <el-select size="mini" v-model="scope.row.column_name" placeholder="表字段">
                <el-option v-for="item in selectedTable.columnList" :value="item.name"></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="流字段">
          <template scope="scope">
            <div v-if="!scope.row.edit">{{scope.row.stream_name}}</div>
            <div v-else>
              <el-select size="mini" v-model="scope.row.stream_name">
                <el-option v-for="item in step.availableFields" :value="item.name"></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" class-name="table-row">
          <template scope="scope">
            <el-row>
              <el-col :span="12">
                <el-button size="small" type="info" @click="reverseEditState(scope.$index, scope.row)">编辑</el-button>
              </el-col>
              <el-col :span="12">
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>

      </el-table>
    </el-form>
  </div>
</template>
<style scoped>

</style>
<script>
  import {Steps} from "../../model/DataModel";
  import StepCommon from "./mixins/StepMixin";
  import DataSourceCommon from "./mixins/DataSourceMixin";

  export default{
    mixins: [StepCommon, DataSourceCommon],
    data(){
      return {
        step: Steps.TableOutput({name: "1231", x: 120, y: 20}),
        selectRow: []
      }
    },
    methods: {
      transportFields(unique, table){
        this.step.fields = table.columnList.map(el => ({
          column_name: el.name,
          stream_name: unique[el.name.toUpperCase()],
          edit: false
        }));
      },
      updateFields(){
        this.step.outputFields = this.step.fields.map(el => el.stream_name);
      },
      addRecord(){
        let that = this;
        this.$refs.form.validate((valid) => {
          if (valid) {
            that.step.fields.push({column_name: '', stream_name: '', edit: true})
          } else {
            return false;
          }
        });
      }
    }
  }
</script>
